var common = require("../../utils/common");

// 方法定义
function createRpx2px() {
  const {
    windowWidth
  } = wx.getSystemInfoSync();

  return function (rpx) {
    return windowWidth / 750 * rpx;
  }
}

//rpx转换
const rpx2px = createRpx2px();

Component({
  /**
   * 组件的属性列表
   */
  options: {
    styleIsolation: 'apply-shared'
  },
  properties: {
    mainImage: {
      type: String,
      value: ''
    },
    title: {
      type: String,
      value: ''
    },
    price: {
      type: String,
      value: ''
    },
    codeUrl: {
      type: String,
      value: ''
    },
    address: {
      type: String,
      value: ''
    },
    shopName: {
      type: String,
      value: ''
    }
  },
  data: {
    hasZtd: false,
    pageFilePath: '' //海报的路径
  },

  ready: function () {
    this.initData();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onClose: function () {
      this.triggerEvent('close', null, {});
    },
    //保存
    onSave: function () {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 290,
        height: this.data.hasZtd ? 455 : 425,
        destWidth: 870,
        destHeight: this.data.hasZtd ? 1365 : 1275,
        canvasId: 'goodsDetailPageCanvas',
        fileType: 'jpg',
        quality: 1,
        success: res => {
          this.setData({
            pageFilePath: res.tempFilePath
          });
          this.saveToAlbum(res.tempFilePath);
        }
      }, this);
    },

    //保存到相册
    saveToAlbum: function (filePath) {
      //获取权限
      if (wx.saveImageToPhotosAlbum) {
        //1.获取设置
        wx.getSetting({
          success: res => {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              //2.提前授权
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success: res => {
                  //直接保存
                  this.savePageImageToPhotosAlbum(filePath);
                },
                fail: res => {
                  //拒绝授权,打开设置
                  this.openPhotosAlbumSetting(res);
                }
              })
            } else {
              //3.写入相册
              this.savePageImageToPhotosAlbum(filePath);
            }
          }
        })
      } else {
        common.showModal("当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。");
      }
    },

    //提示打开相册权限
    openPhotosAlbumSetting: function (res) {
      //授权拒绝
      var firstAuthDeny = res.errMsg.indexOf("fail auth deny") != -1;
      if (firstAuthDeny) return;
      //提示打开设置
      common.showModal("亲，我们未获得您的相册授权，即将打开设置", null, true, null, null, () => {
        wx.openSetting({
          success: res => {
            var isOpenWriteAuth = res.authSetting['scope.writePhotosAlbum'];
            // 选择自提点
            if (isOpenWriteAuth) {
              this.savePageImageToPhotosAlbum(this.data.pageFilePath);
            }
          }
        })
      })
    },

    //保存海报图片到相册
    savePageImageToPhotosAlbum: function (tempFilePath) {
      wx.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: res => {
          common.showModal("海报保存成功！");
        }
      });
    },

    //初始化数据
    initData: function () {
      //解析data
      var tmpHasZtd = !!this.data.address;
      this.setData({
        hasZtd: tmpHasZtd,
      });
      //绘制海报
      if (tmpHasZtd) {
        this.drawSharePageWithZtd();
      } else {
        this.drawSharePage();
      }
    },
    donwoadImage: function () {

    },
    //绘制分享页面
    drawSharePage: function () {
      //定义变量
      const caW = rpx2px(580);
      var y = 0;
      const ctx = wx.createCanvasContext('goodsDetailPageCanvas', this);
      //1.首先清空画布
      ctx.clearRect(0, 0, rpx2px(580), rpx2px(850));
      //1.绘制背景色
      ctx.save();
      this.roundRect(ctx, 0, 0, caW, rpx2px(910), rpx2px(12), "#eee");
      ctx.restore();
      //2.绘制白色背景
      ctx.rect(rpx2px(30), rpx2px(30), rpx2px(520), rpx2px(790));
      ctx.save();
      //2.1切除白色背景圆角
      this.roundRect(ctx, rpx2px(30), rpx2px(30), rpx2px(520), rpx2px(790), rpx2px(12), "#fff");
      ctx.restore();
      //3.大牛惠生活背景
      ctx.drawImage("../../images/page_title_bg.png", rpx2px(192.5), rpx2px(24), rpx2px(195), rpx2px(60));
      //4.大牛惠生活电商
      ctx.setFillStyle("#fff");
      ctx.setFontSize(rpx2px(22));
      ctx.setTextAlign('center');
      ctx.fillText('大牛惠生活', caW / 2, rpx2px(60));
      //5.产品图片
      y += rpx2px(95);
      ctx.drawImage(this.data.mainImage, rpx2px(142), y, rpx2px(295), rpx2px(295));
      y += rpx2px(295);
      //6.绘制title，最多显示两行
      y += rpx2px(36);
      ctx.setFillStyle("#333");
      ctx.setFontSize(rpx2px(24));
      ctx.setTextAlign('left');
      const titleMaxWidth = rpx2px(416);
      const content = this.data.title;
      let titleX = rpx2px(82);
      let currentLine = "";
      for (let i = 0; i < content.length; i++) {
        currentLine += content[i];
        if ((i + 1) % 17 === 0 || i === content.length - 1) {
          ctx.fillText(currentLine, titleX, y, titleMaxWidth);
          currentLine = "";
          y += rpx2px(40);
        }
      }
      //7.绘制价格
      y = rpx2px(506);
      var tmpPrice = "¥" + this.data.price;
      ctx.setFillStyle("#F85445");
      ctx.setFontSize(rpx2px(30));
      ctx.setTextAlign('left');
      ctx.fillText(tmpPrice, rpx2px(86), rpx2px(506));
      const measurePrice = ctx.measureText(tmpPrice);
      //起
      ctx.setFillStyle("#666");
      ctx.setFontSize(rpx2px(24));
      ctx.setTextAlign('left');
      ctx.fillText("起", rpx2px(90) + measurePrice.width, rpx2px(504));
      y += rpx2px(50);
      //8.绘制二维码图片
      y = rpx2px(596);
      ctx.drawImage(this.data.codeUrl, rpx2px(216), y, rpx2px(148), rpx2px(148));
      //二维码边框
      ctx.save();
      ctx.beginPath();
      ctx.setStrokeStyle('#333');
      ctx.setLineDash([1, 2]);
      ctx.lineJoin = 'round';
      this.roundRectPath(ctx, rpx2px(216), y, rpx2px(148), rpx2px(148), 0);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
      y += rpx2px(148 + 13);
      //9.提示文字
      y = rpx2px(790);
      ctx.setFillStyle("#4AC366");
      ctx.setFontSize(rpx2px(20));
      ctx.setTextAlign('center');
      ctx.fillText("今天下单，明天到店自提", caW / 2, y);

      //10.小圆点
      //左侧圆点
      y = rpx2px(744);
      ctx.beginPath();
      ctx.arc(rpx2px(30), y, rpx2px(4), 0, 2 * Math.PI);
      ctx.setFillStyle('#eee');
      ctx.fill();
      ctx.closePath();

      //右侧圆点
      ctx.beginPath();
      ctx.arc(rpx2px(550), y, rpx2px(4), 0, 2 * Math.PI);
      ctx.setFillStyle('#eee');
      ctx.fill();
      ctx.closePath();
      //绘制
      ctx.draw();
    },

    //绘制带有自提点的分享图
    drawSharePageWithZtd: function () {
      //定义变量
      const caW = rpx2px(580);
      var y = 0;
      const ctx = wx.createCanvasContext('goodsDetailPageCanvas', this);
      //1.首先清空画布
      ctx.clearRect(0, 0, rpx2px(580), rpx2px(910));
      //1.绘制背景色
      ctx.save();
      this.roundRect(ctx, 0, 0, caW, rpx2px(910), rpx2px(12), "#eee");
      ctx.restore();
      //2.绘制白色背景
      ctx.rect(rpx2px(30), rpx2px(30), rpx2px(520), rpx2px(850));
      ctx.save();
      //2.1切除白色背景圆角
      console.log(rpx2px(850));
      this.roundRect(ctx, rpx2px(30), rpx2px(30), rpx2px(520), rpx2px(850), rpx2px(12), "#fff");
      ctx.restore();
      //3.大牛惠生活背景
      ctx.drawImage("../../images/page_title_bg.png", rpx2px(192.5), rpx2px(24), rpx2px(195), rpx2px(60));
      //4.大牛惠生活
      ctx.setFillStyle("#fff");
      ctx.setFontSize(rpx2px(22));
      ctx.setTextAlign('center');
      ctx.fillText('大牛惠生活', caW / 2, rpx2px(60));
      //5.产品图片
      y += rpx2px(95);
      ctx.drawImage(this.data.mainImage, rpx2px(142), y, rpx2px(295), rpx2px(295));
      y += rpx2px(295);
      //6.绘制title，最多显示两行
      y += rpx2px(36);
      ctx.setFillStyle("#333");
      ctx.setFontSize(rpx2px(24));
      ctx.setTextAlign('left');
      const titleMaxWidth = rpx2px(416);
      const content = this.data.title;
      let titleX = rpx2px(82);
      let currentLine = "";
      for (let i = 0; i < content.length; i++) {
        currentLine += content[i];
        if ((i + 1) % 17 === 0 || i === content.length - 1) {
          ctx.fillText(currentLine, titleX, y, titleMaxWidth);
          currentLine = "";
          y += rpx2px(40);
        }
      }
      //7.绘制价格
      y = rpx2px(506);
      var tmpPrice = "¥" + this.data.price;
      ctx.setFillStyle("#F85445");
      ctx.setFontSize(rpx2px(30));
      ctx.setTextAlign('left');
      ctx.fillText(tmpPrice, rpx2px(86), rpx2px(506));
      const measurePrice = ctx.measureText(tmpPrice);
      //起
      ctx.setFillStyle("#666");
      ctx.setFontSize(rpx2px(24));
      ctx.setTextAlign('left');
      ctx.fillText("起", rpx2px(90) + measurePrice.width, rpx2px(504));
      y += rpx2px(50);
      //8.绘制当前自提点
      y += rpx2px(9);
      var tmpaddress = '自提点：' + this.data.address;
      ctx.setFillStyle("#aaa");
      ctx.setFontSize(rpx2px(24));
      ctx.setTextAlign('left');
      var ztdChr = tmpaddress.split(""); //这个方法是将一个字符串分割成字符串数组
      var ztdTemp = "";
      for (var a = 0; a < ztdChr.length; a++) {
        if (ctx.measureText(ztdTemp).width < rpx2px(400)) {
          ztdTemp += ztdChr[a];
        } else {
          a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
          ztdTemp += "...";
          break;
        }
      }
      ctx.fillText(ztdTemp, rpx2px(82), y, rpx2px(416));
      y += rpx2px(24);
      //9.绘制二维码图片
      y = rpx2px(623);
      ctx.drawImage(this.data.codeUrl, rpx2px(216), y, rpx2px(148), rpx2px(148));
      //二维码边框
      ctx.save();
      ctx.beginPath();
      ctx.setStrokeStyle('#333');
      ctx.setLineDash([1, 2]);
      ctx.lineJoin = 'round';
      this.roundRectPath(ctx, rpx2px(216), y, rpx2px(148), rpx2px(148), 0);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
      y += rpx2px(148 + 13);

      //10.绘制店名
      y = rpx2px(814);
      ctx.setFillStyle("#aaa");
      ctx.setFontSize(rpx2px(24));
      ctx.setTextAlign('center');
      var shopNameChr = this.data.shopName.split(""); //这个方法是将一个字符串分割成字符串数组
      var shopNameTemp = "";
      for (var a = 0; a < shopNameChr.length; a++) {
        if (ctx.measureText(shopNameTemp).width < rpx2px(230)) {
          shopNameTemp += shopNameChr[a];
        } else {
          a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
          shopNameTemp += "...";
          break;
        }
      }
      ctx.fillText(shopNameTemp, caW / 2, y);
      y += rpx2px(148);

      //10.提示文字
      y = rpx2px(856);
      ctx.setFillStyle("#4AC366");
      ctx.setFontSize(rpx2px(20));
      ctx.setTextAlign('center');
      ctx.fillText("今天下单，明天到店自提", caW / 2, y);

      //11绘制左右小圆点
      y = rpx2px(808);
      ctx.beginPath();
      ctx.arc(rpx2px(30), y, rpx2px(4), 0, 2 * Math.PI);
      ctx.setFillStyle('#eee');
      ctx.fill();
      ctx.closePath();

      //左边的线
      ctx.beginPath();
      ctx.lineWidth = rpx2px(0.1);
      ctx.moveTo(rpx2px(32), y + rpx2px(1));
      ctx.lineTo(rpx2px(32 + 120), y + rpx2px(1));
      ctx.stroke();
      ctx.closePath();

      //右侧圆点
      ctx.beginPath();
      ctx.arc(rpx2px(550), y, rpx2px(4), 0, 2 * Math.PI);
      ctx.setFillStyle('#eee');
      ctx.fill();
      ctx.closePath();

      ctx.beginPath();
      ctx.lineWidth = rpx2px(0.1);
      ctx.moveTo(rpx2px(406), y + rpx2px(1));
      ctx.lineTo(rpx2px(406 + 137), y + rpx2px(1));
      ctx.stroke();
      ctx.closePath();
      //绘制
      ctx.draw();
    },
    /**
     * 
     * @param {CanvasContext} ctx canvas上下文
     * @param {number} x 圆角矩形选区的左上角 x坐标
     * @param {number} y 圆角矩形选区的左上角 y坐标
     * @param {number} w 圆角矩形选区的宽度
     * @param {number} h 圆角矩形选区的高度
     * @param {number} r 圆角的半径
     */
    roundRect: function (ctx, x, y, w, h, r, color) {
      // 开始绘制
      ctx.beginPath()
      // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
      // 这里是使用 fill 还是 stroke都可以，二选一即可
      ctx.setFillStyle(color)
      // ctx.setStrokeStyle('transparent')
      // 左上角
      ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

      // border-top
      ctx.moveTo(x + r, y)
      ctx.lineTo(x + w - r, y)
      ctx.lineTo(x + w, y + r)
      // 右上角
      ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

      // border-right
      ctx.lineTo(x + w, y + h - r)
      ctx.lineTo(x + w - r, y + h)
      // 右下角
      ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

      // border-bottom
      ctx.lineTo(x + r, y + h)
      ctx.lineTo(x, y + h - r)
      // 左下角
      ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

      // border-left
      ctx.lineTo(x, y + r)
      ctx.lineTo(x + r, y)

      // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
      ctx.fill()
      // ctx.stroke()
      ctx.closePath()
      // 剪切
      ctx.clip()
    },
    /// 圆角矩形路径 
    roundRectPath: function (ctx, x, y, w, h, r) {
      ctx.beginPath();
      ctx.moveTo(x + r, y);
      ctx.arcTo(x + w, y, x + w, y + h, r);
      ctx.arcTo(x + w, y + h, x, y + h, r);
      ctx.arcTo(x, y + h, x, y, r);
      ctx.arcTo(x, y, x + w, y, r);
      ctx.closePath();
    }
  }
})